<template>
  <div>
    <div v-loading="dataLoading" class="content">
      <el-form
        ref="refForm"
        style="margin-top:20px"
        :rules="formRules"
        :model="formData"
        size="mini"
        label-width="130px"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="申请人:" prop="">
              {{ id?formData.applicantCode:this.$store.getters.user.data.userName }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请人电话:" prop="">
              {{ id?formData.applicantPhone:this.$store.getters.user.data.phone }}
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="办事处:" prop="officeCode">
              <input-with-dialog
                v-model="office"
                :props="{label:'name',value:'code'}"
                :config="dialogConfigOffice"
                @change="handleChangeOffice"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="办事处性质:" prop="officeNature">
              <el-input v-model="formData.officeNature" placeholder="——" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="门店建设类型:" prop="marketSubdType">
              <el-select
                v-model="formData.marketSubdType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in buildTypeOption"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="预报图区域:" prop="reportPicZone">
              <el-checkbox-group v-model="formData.reportPicZone">
                <el-checkbox v-for="item in belongRegionOption" :key="item.areaCode" :label="item.areaCode">{{ item.areaName }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="商家类别:" prop="businessType">
              <el-select
                v-model="formData.businessType"
                placeholder="请选择"
                style="width: 100%"
                @change="changeBusinessType"
              >
                <el-option
                  v-for="item in bizmanTypeOption"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col v-show="formData.businessType==='OLD'" :span="6">
            <el-form-item :rules="[{required:formData.businessType==='OLD',message:'请选择'}]" label="一商多市场:" prop="isDealerMultMarket">
              <div>
                <el-select
                  v-model="formData.isDealerMultMarket"
                  placeholder="请选择"
                  style="width: 100%;"
                  @change="changeReferData"
                >
                  <el-option label="是" value="1" />
                  <el-option label="否" value="0" />
                </el-select>
                <span class="info-text">
                  说明：1、指在不同市场开店以选址商家姓名建立的独立户头；<br>
                  2、指在不同市场开店，以不同姓名建立的户头，但选址商家与其共同经营的情况
                </span>
              </div>
            </el-form-item>
          </el-col>  -->
          <el-col v-show="formData.businessType==='NEW'" :span="6">
            <el-form-item :rules="[{required:formData.businessType==='NEW',message:'请选择'}]" label="选址商家与已建档案商家是否有关系:" prop="isReferExistDealer">
              <el-select
                v-model="formData.isReferExistDealer"
                placeholder="请选择"
                style="width: 100%"
                @change="changeReferData"
              >
                <el-option label="有关系" value="1" />
                <el-option label="无关系" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="formData.isReferExistDealer==='1'">
          <el-col :span="6">
            <el-form-item
              prop="referCustomerName"
              :rules="[{required:formData.isReferExistDealer==='1',message:'请选择关系客户',trigger:'change'}]"
              label="关系客户:"
            >
              <input-with-dialog
                v-model="referCustomer"
                :props="{label:'name',value:'code'}"
                :config="dialogConfigCustomer"
                @change="handleChangeReferCustomer"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关系客户编码:"> {{ formData.referCustomerCode }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="formData.isReferExistDealer==='1'">
          <el-col :span="24">
            <el-form-item label="具体关系描述:" :rules="[{required:formData.isReferExistDealer==='1',message:'请输入'}]" prop="relationDesc">
              <el-input v-model="formData.relationDesc" placeholder="请输入" size="mini" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="formData.isReferExistDealer==='1'">
          <el-col :span="18">
            <el-form-item label="">
              <span style="color:#F56C6C">
                说明：如夫妻、合伙人、兄弟姐妹、子女、合伙人的亲戚等其他关系
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-show="formData.businessType==='NEW'" :span="6">
            <el-form-item :rules="[{required:formData.businessType==='NEW',message:'请选择'}]" label="新商类别:" prop="newShopType">
              <el-select
                v-model="formData.newShopType"
                clearable
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in newShopTypeOption"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-show="formData.businessType==='NEW'" :span="18">
            <el-form-item :rules="[{required:formData.newShopType&&formData.newShopType!=='A'&&formData.businessType==='NEW',message:'请填写'}]" label="选择类别的原因:" prop="newShopReason">
              <el-input v-model="formData.newShopReason" placeholder="新商优先开发顺序为装企商，建材商，房开商，家具商，若未优先选择前者类型请说明原因" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="是否新建客户档案:" prop="isNewCustomerProfile">
              <el-select
                v-model="formData.isNewCustomerProfile"
                :disabled="formData.businessType==='NEW'?true:false"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />

              </el-select>
            </el-form-item>
          </el-col>

          <el-col v-show="formData.isNewCustomerProfile===0" :span="6">
            <el-form-item :rules="[{required:formData.isNewCustomerProfile===0,message:'请选择所属客户'}]" label="所属客户:" prop="clientCode">
              <input-with-dialog
                v-model="client"
                :disabled="!!formData.isNewCustomerProfile"
                :props="{label:'name',value:'code'}"
                :config="dialogConfigCustomer"
                @change="handleChangeCustomer"
              />
            </el-form-item>
          </el-col>

          <el-col v-show="formData.isNewCustomerProfile===0" :span="6">
            <el-form-item label="客户编码:"> {{ formData.clientCode }}
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="经销商姓名:" prop="customerName">
              <el-input
                v-model="formData.customerName"
                :disabled="!formData.isNewCustomerProfile"
                placeholder="请填写经销商姓名"
                maxlength="50"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="经销商身份证号:" prop="customerIdcardNo">
              <el-input
                v-model="formData.customerIdcardNo"
                :disabled="!formData.isNewCustomerProfile"
                placeholder="请填写经销商身份证号"
                maxlength="18"
                show-word-limit
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="经销商电话:" prop="customerPhone">
              <el-input
                v-model="formData.customerPhone"
                :disabled="!formData.isNewCustomerProfile"
                placeholder="请填写经销商电话"
                maxlength="11"
                show-word-limit
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所在楼层:" prop="floors">
              <el-input v-model="formData.floors">
                <span slot="suffix">楼</span>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="门店类型:" prop="shopType">
              <el-select
                v-model="formData.shopType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in storeTypeOption"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="门店地址:" prop="shopAddress">
              <el-input v-model="formData.shopAddress" maxlength="50" show-word-limit type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item :rules="[{required:true,message:'请选择'}]" label="是否黄金地段:" prop="isPrimeLot">
              <el-select
                v-model="formData.isPrimeLot"
                placeholder="请选择"
                style="width: 100%"
                @change="changeIsPrimeLot"
              >
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-show="formData.isPrimeLot==='1'" :span="18">
            <el-form-item :rules="[{required:formData.isPrimeLot==='1',message:'请填写'}]" label="黄金地段详情描述:" prop="primeLotDesc">
              <el-input v-model="formData.primeLotDesc" maxlength="1000" show-word-limit type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item :rules="[{required:true,message:'请选择'}]" label="是否KA卖场:" prop="isKaShop">
              <el-select
                v-model="formData.isKaShop"
                placeholder="请选择"
                style="width: 100%"
                @change="changeIsKaShop"
              >
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-show="formData.isKaShop==='1'" :span="18">
            <el-form-item :rules="[{required:formData.isKaShop==='1',message:'请填写'}]" label="KA卖场详情描述:" prop="kaShopDesc">
              <el-input v-model="formData.kaShopDesc" maxlength="1000" show-word-limit type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="门店面积:" prop="shopArea">
              <el-input v-model.number="formData.shopArea" maxlength="4">
                <span slot="suffix">㎡</span>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市级别:" prop="cityLevel">
              <el-select
                v-model="formData.cityLevel"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in cityLevelOption"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :rules="[{required:true,message:'请选择'}]" label="市场层级:" prop="shopMarketLevel">
              <c-dict-select
                v-model="formData.shopMarketLevel"
                dict-type-code="MARKET_LEVEL"
                placeholder="请选择"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="卖场名称:" prop="shopName">
              <el-input v-model="formData.shopName" maxlength="50" show-word-limit />
            </el-form-item>
          </el-col> -->

          <el-col :span="6">
            <el-form-item label="省份" prop="provinceCode">
              <el-select
                v-model="formData.provinceCode"
                placeholder="请选择"
                filterable
                @change="changeProvince"
              >
                <el-option
                  v-for="item in provinceOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="城市" prop="cityCode">
              <el-select
                v-model="formData.cityCode"
                filterable
                placeholder="请选择"
                @change="changeCity"
              >
                <el-option
                  v-for="item in cityOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="区/县" prop="areaCode">
              <el-select
                v-model="formData.areaCode"
                filterable
                placeholder="请选择"
                @change="changeCounty"
              >
                <el-option
                  v-for="item in countyOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :rules="[{required:streetOptions.length!==0,message:'请选择街道'}]" label="街道" prop="streetCode">
              <el-select
                v-model="formData.streetCode"
                filterable
                placeholder="请选择"
                @change="changeStreet"
              >
                <el-option
                  v-for="item in streetOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="formData.remark"
                placeholder="请填写备注"
                maxlength="1000"
                type="textarea"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div
        v-for="item in fileTypeList"
        :key="item.id"
      >
        <div class="qup-title-box"><span class="border" /><span>附件上传-{{ item.attachmentType==='卖场环境照片'?'卖场环境照片(不少于5张)':item.attachmentType }}</span></div>
        <import-img
          v-if="item.attachmentType==='卖场环境照片'"
          :photo-list="item.fileList"
          :file-type="item.fileTypeName"
          :config-attachment-id="item.id||''"
          @remove="removeImg"
          @upload-success="uploadSuccessImg"
        />
        <import-file
          v-else
          :data="item.fileList"
          :file-type="item.fileTypeName"
          :config-attachment-id="item.id||''"
          @remove="removeFile"
          @upload-success="uploadSuccessFile"
        />
      </div>
    </div>
    <div class="footer-btn">
      <el-button :loading="saveLoading" size="mini" type="primary" @click.native="saveForm('2')">提交</el-button>
      <el-button style="margin-right:20px" :loading="saveLoading" size="mini" type="primary" @click.native="saveForm('1')">保存</el-button>
    </div>
  </div>
</template>
<script>
import { validIDCard } from '@/utils/validate'
import { getShopAttachment, getAreaList } from '@/api/common.js'
import importFile from '@/components/importFile'
import importImg from '@/components/importImg'
import { saveAddress, submitSelect, getDetailById, postConfigAttachmentTemplate } from '@/api/shopAddEva'
import { getDictByPatchType } from '@/api/dataDict'
import { getProvinces, getCities, getCounties, getStreets } from '@/api/dataDict.js'
export default {
  name: 'EditStoreAdd',
  components: { importFile, importImg },
  props: {},
  data() {
    return {
      id: '',
      validIDCard,
      saveLoading: false,
      dataLoading: false,
      fileTypeList: [], // 模板下所属附件类型
      fileList: [], // 选址评估表列表
      imgList: [], // 现场图列表
      imgLength: 0, // 图片上传个数
      fileLength: 0, // 文件上传个数
      buildTypeOption: [], // 门店建设类型
      bizmanTypeOption: [], // 商家类别
      belongRegionOption: [], // 预报图区域
      storeTypeOption: [], // 门店类型
      cityLevelOption: [], // 城市级别
      newShopTypeOption: [], // 新商类别
      office: [],
      client: [],
      referCustomer: [],
      formData: {
        applicantCode: '', // 申请人编码
        applicantPhone: '', // 申请人电话
        areaCode: '', // 区编码
        areaName: '', // 区名称
        businessType: '', // 商家类别
        newShopType: '', // 新商类别
        newShopReason: '', // 选择类别的原因
        cityCode: '', // 市编码
        cityName: '', // 市名称
        cityLevel: '', // 城市级别
        clientCode: '', // 客户编码
        clientName: '', // 客户名称
        referCustomerName: '',
        referCustomerCode: '',
        customerCode: '', // 经销商编码
        customerIdcardNo: '', // 经销商身份证
        customerName: '', // 经销商名称
        floors: '', // 楼层
        id: '',
        isNewCustomerProfile: 1, // 是否新建客户档案
        // isDealerMultMarket: '',
        isReferExistDealer: '',
        relationDesc: '',
        locationApplyCode: '', // 选址申请编号
        maintainDesc: '', // 档案维护说明
        marketSubdType: '', // 门店建设类型：新市场新建、老市场新建
        customerPhone: '',
        mdmCityLevel: '', // 城市级别：省级、地级、县级、镇级
        mdmClientCode: '', // 所属客户编码
        mdmClientName: '', // 所属客户名称
        mdmCustomerCode: '', // 经销商编号
        mdmCustomerIdcardNo: '', // 经销商身份证号
        mdmCustomerName: '', // 经销商姓名
        mdmCustomerPhone: '', // 经销商电话
        mdmShopAddress: '', // 门店地址
        mdmShopArea: '', // 门店面积
        mdmShopCode: '', // 门店号
        mdmShopName: '', // 门店名称
        mdmShopType: '', // 门店类型：店中店、独立店
        shopMarketLevel: '',
        officeCode: '', // 办事处编码
        officeName: '', // 办事处名称
        officeNature: '', // 办事处性质
        provinceCode: '', // 省编码
        provinceName: '', // 省名称
        reportPicZone: [], // 预报图区域：成品、全屋定制、整体橱柜、全友卫浴、样板间
        reviewAdvice: '', // 审核意见
        reviewResult: '', // 审核结果：符合建店标准、退回修改、不符合建店标准
        shopAddress: '', // 门店地址
        shopArea: '', // 门店面积
        kaShopDesc: '', //
        primeLotDesc: '',
        isKaShop: undefined,
        isPrimeLot: undefined,
        // shopAttachmentDTOList: [], // 附件列表
        shopCode: '', // 门店号
        shopName: '', // 门店名称
        shopType: '', // 门店类型：店中店、独立店
        state: '1', // 状态
        streetCode: '', // 街道编码
        streetName: '', // 街道名称
        remark: ''
      },
      formRules: {
        officeCode: [
          { required: true, message: '请选择办事处', trigger: 'blur' }
        ],
        marketSubdType: [
          { required: true, message: '请选择门店建设类型', trigger: 'change' }
        ],
        businessType: [
          { required: true, message: '请选择商家类别', trigger: 'change' }
        ],
        reportPicZone: [
          { required: true, message: '请选择预报图区域', trigger: 'change' }
        ],
        isNewCustomerProfile: [
          { required: true, message: '请选择是否新建客户档案', trigger: 'change' }
        ],
        clientCode: [
          { required: false, message: '请选择所属客户', trigger: 'change' }
        ],
        floors: [
          { required: true, message: '请填写所在楼层', trigger: 'change' }
          // { pattern: /^[0-9]+$/, message: '只能输入数字' }
        ],
        customerIdcardNo: [
          { required: true, message: '请填写经销商身份证号', trigger: 'change' },
          // { validator: validatePass, trigger: 'blur' }
          { pattern: /^(([0-9]{15})|([0-9]{18})|([0-9]{17}[x,X]))$/, message: '请输入正确的身份证号' }

        ],
        customerName: [
          { required: true, message: '请填写经销商姓名', trigger: 'change' }
        ],
        customerPhone: [
          { required: true, message: '请填写经销商电话', trigger: 'change' },
          { pattern: /^[0-9]+$/, message: '只能输入数字' }
        ],
        shopType: [
          { required: true, message: '请选择门店类型', trigger: 'change' }
        ],
        shopAddress: [
          { required: true, message: '请填写门店地址', trigger: 'change' }
        ],
        shopArea: [
          { required: true, message: '请填写门店面积', trigger: 'change' },
          { pattern: /^[0-9]+$/, message: '只能输入数字' }
        ],
        cityLevel: [
          { required: true, message: '请选择城市级别', trigger: 'change' }
        ],
        // shopName: [
        //   { required: true, message: '请输入卖场名称', trigger: 'change' }
        // ],
        provinceCode: [
          { required: true, message: '请选择省份', trigger: 'change' }
        ],
        shopMarketLevel: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        cityCode: [
          { required: true, message: '请选择城市', trigger: 'change' }
        ],
        areaCode: [
          { required: true, message: '请选择区/县', trigger: 'change' }
        ],
        streetCode: [
          { required: false, message: '请选择街道', trigger: 'change' }
        ]
      },
      provinceOptions: [],
      cityOptions: [],
      countyOptions: [],
      streetOptions: [],
      dialogConfigOffice: {
        title: '办事处',
        interfacePath: `/select-service/api/v1/organization/page`,
        filtersRaw: [{ 'id': 'name', 'property': 'name', 'value': '销售公司直营部', 'operator': '<>' }, { 'id': 'isOffice', 'property': 'isOffice', 'value': '1', 'operator': '=' }, { 'id': 'status', 'property': 'status', 'value': '1', 'operator': '=' }],
        setting: [{ prop: 'code', title: '编码', width: 120 }, { prop: 'name', title: '名称', width: 250 }]
      },
      dialogConfigCustomer: {
        title: '所属客户',
        apiHeader: {
          'permission-code': 'storeaddeva',
          'Permission-App': 'slm'
        },
        filtersRaw: [],
        interfacePath: `/select-service/api/v1/customer/page`,
        setting: [{ prop: 'code', title: '编码', width: 120 }, { prop: 'name', title: '名称', width: 250 }]

      }
    }
  },
  computed: {
  },
  watch: {
    'formData.isNewCustomerProfile'(v) {
      if (v === 1) {
        this.formData.clientCode = ''
        this.formData.clientName = ''
        this.formData.customerName = ''
        this.formData.customerCode = ''
        this.formData.customerPhone = ''
        this.formData.customerIdcardNo = ''
        this.client = [{ code: '', name: '' }]
        this.formRules.customerName[0].required = true
        this.formRules.customerPhone[0].required = true
        this.formRules.customerIdcardNo[0].required = true
      } else {
        this.formRules.customerName[0].required = false
        this.formRules.customerPhone[0].required = false
        this.formRules.customerIdcardNo[0].required = false

        this.$refs.refForm.validateField('customerName')
        this.$refs.refForm.validateField('customerPhone')
        this.$refs.refForm.validateField('customerIdcardNo')
      }
    }
  },
  async  created() {
    this.id = this.$route.query.id
    await postConfigAttachmentTemplate().then(res => {
      if (res.success === 1 && res.data.records.length > 0) {
        // 根据modelId获取每个配置id
        this.fileTypeList = res.data.records.filter(el => el.enable === 1 && el.attachmentType !== '考察报告')
        this.fileTypeList.forEach(row => {
          this.$set(row, 'fileList', [])
        })
      }
    })
    if (this.id) {
      this.dataLoading = true
      this.getFiles()// 获取文件，图片列表
      await getDetailById(this.id).then(res => {
        if (res.success === 1) {
          // this.formData = res.data
          for (const key in this.formData) {
            const value = res.data[key] === 0 ? 0 : (res.data[key] || '')
            this.$set(this.formData, key, value)
          }
          this.formData.reportPicZone = res.data.reportPicZone && res.data.reportPicZone.split(',')
          this.dataLoading = false
        }
      })
    }
    this.office = [{ code: this.formData.officeCode || '', name: this.formData.officeName || '' }]
    this.client = [{ code: this.formData.clientCode || '', name: this.formData.clientName || '' }]
    this.referCustomer = [{ code: this.formData.referCustomerCode || '', name: this.formData.referCustomerName || '' }]
    this.getDictByPatchTypeAll()
    this.getAreaSelect()
    this.loadRegionData()// 加载区域初始数据
  },

  methods: {
    changeReferData(data) {
      this.formData.relationDesc = ''
      this.referCustomer = [{ code: '', name: '' }]
      this.formData.referCustomerCode = ''
      this.formData.referCustomerName = ''
    },
    changeIsPrimeLot(data) {
      if (!data) this.formData.primeLotDesc = ''
    },
    changeIsKaShop(data) {
      if (!data) this.formData.kaShopDesc = ''
    },
    loadRegionData() {
      getProvinces().then(res => {
        if (res.success === 1) {
          this.provinceOptions = res.data
          // 获取城市下拉列表
          if (this.formData.provinceCode) {
            getCities(this.formData.provinceCode).then(res => {
              if (res.success === 1) { this.cityOptions = res.data }
            })
          }
          // 获取区/县下拉数据
          if (this.formData.cityCode) {
            getCounties(this.formData.cityCode).then(res => {
              if (res.success === 1) { this.countyOptions = res.data }
            })
          }
          // 获取街道下拉数据
          if (this.formData.areaCode) {
            getStreets(this.formData.areaCode).then(res => {
              if (res.success === 1) { this.streetOptions = res.data }
            })
          }
        }
      })
    },
    changeProvince(data) {
      const tempArr = this.provinceOptions.filter(row => row.id === data)
      this.formData.provinceName = tempArr[0].name
      // this.formData.provinceCode = data
      this.formData.cityName = ''
      this.formData.cityCode = ''
      this.formData.areaCode = ''
      this.formData.areaName = ''
      this.formData.streetCode = ''
      this.formData.streetName = ''
      if (data) {
        getCities(data).then(res => {
          if (res.success === 1) { this.cityOptions = res.data }
        })
      }
    },
    changeCity(data) {
      const tempArr = this.cityOptions.filter(row => row.id === data)
      this.formData.cityName = tempArr[0].name
      // this.formData.cityCode = data
      this.formData.areaCode = ''
      this.formData.areaName = ''
      this.formData.streetCode = ''
      this.formData.streetName = ''
      if (data) {
        getCounties(data).then(res => {
          if (res.success === 1) { this.countyOptions = res.data }
        })
      }
    },
    changeCounty(data) {
      const tempArr = this.countyOptions.filter(row => row.id === data)
      this.formData.areaName = tempArr[0].name
      // this.formData.areaCode = data
      this.formData.streetName = ''
      this.formData.streetCode = ''

      if (data) {
        getStreets(data).then(res => {
          if (res.success === 1) { this.streetOptions = res.data }
        })
      }
    },
    changeStreet(data) {
      const tempArr = this.streetOptions.filter(row => row.id === data)
      this.formData.streetName = tempArr[0].name
      this.formData.streetCode = data
    },
    changeBusinessType(data) {
      if (data === 'NEW') {
        this.formData.isNewCustomerProfile = 1
        // this.formData.isDealerMultMarket = ''
      } else {
        this.formData.newShopType = ''
        this.formData.newShopReason = ''
        this.formData.isNewCustomerProfile = 0
        this.formData.isReferExistDealer = ''
      }
      this.changeReferData()
    },
    // 获取附件
    getFiles() {
      getShopAttachment(this.id).then(res => {
        this.fileTypeList.forEach(row => {
          row.fileList = res.data.filter(i => i.configAttachmentId === row.id)
          if (row.attachmentType === '卖场环境照片') this.imgLength = row.fileList.length
          if (row.attachmentType === '选址评估表') this.fileLength = row.fileList.length
        })
      })
    },
    async getDictByPatchTypeAll() {
      const { CONST_TYPE, BIZMAN_TYPE, SHOP_TYPE, CITY_LEVEL, NEW_BUSINESS_CATEGORY } =
       await getDictByPatchType(['CONST_TYPE', 'BIZMAN_TYPE', 'SHOP_TYPE', 'CITY_LEVEL', 'NEW_BUSINESS_CATEGORY'])
      this.buildTypeOption = CONST_TYPE.slice(0, 2)
      this.bizmanTypeOption = BIZMAN_TYPE
      this.storeTypeOption = SHOP_TYPE
      this.cityLevelOption = CITY_LEVEL
      this.newShopTypeOption = NEW_BUSINESS_CATEGORY
    },
    getAreaSelect() {
      getAreaList().then(res => {
        if (res.success === 1) this.belongRegionOption = res.data.records.filter(v => v.enable)
      })
    },
    // 监听办事处数据变化
    handleChangeOffice(data) {
      if (data.length !== 0) {
        this.formData.officeCode = data[0].code// 办事处编码
        this.formData.officeName = data[0].name// 办事处名称
        this.formData.officeNature = data[0].officeTypeName// 办事处性质
        // 客户数据根据门店选择筛选
        if (this.formData.clientCode) {
          this.formData.clientCode = ''
          this.formData.clientName = ''
          this.formData.customerName = ''
          this.formData.customerPhone = ''
          this.formData.customerIdcardNo = ''
          this.client = [{ code: '', name: '' }]
        }
        if (this.formData.referCustomerCode) {
          this.formData.referCustomerCode = ''
          this.formData.referCustomerName = ''
          this.referCustomer = [{ code: '', name: '' }]
        }
        this.$set(this.dialogConfigCustomer, 'filtersRaw', [{ 'id': 'agencyCode', 'property': 'agencyCode', 'value': data[0].code, 'operator': '=' }])
        this.$refs.refForm.validateField('officeCode')
      } else {
        this.formData.officeCode = ''
        this.formData.officeName = ''
        this.formData.officeNature = ''
      }
    },
    handleChangeReferCustomer(data) {
      if (data.length !== 0) {
        this.$set(this.formData, 'referCustomerName', data[0].name)
        this.$set(this.formData, 'referCustomerCode', data[0].code)
      } else {
        this.$set(this.formData, 'referCustomerName', '')
        this.$set(this.formData, 'referCustomerCode', '')
      }
    },
    // 监听所属客户数据变化
    handleChangeCustomer(data) {
      let code = ''
      if (data.length !== 0) {
        code = data[0].code
        this.formData.clientName = data[0].name
        this.formData.customerIdcardNo = data[0].credentialNo
        this.formData.customerPhone = data[0].contactPhone
        this.formData.customerName = data[0].contactName || ''
        this.client = [{ code: data[0].code, name: data[0].name }]
      } else {
        code = ''
        this.formData.clientName = ''
        this.formData.customerIdcardNo = ''
        this.formData.customerPhone = ''
        this.formData.customerName = ''
      }
      this.$set(this.formData, 'clientCode', code)
      // this.$refs.refForm.validateField('clientCode')
    },
    goBack() {
      this.$store.dispatch('views/goBack')// 返回列表页
    },
    // 删除图片
    removeImg(data) {
      this.imgLength = data.imgLength
    },
    // 删除文件
    removeFile(data) {
      this.fileLength = data.fileLength
    },
    // 文件上传成功
    uploadSuccessFile(data) {
      this.fileLength = data.fileLength
    },
    // 图片上传成功
    uploadSuccessImg(data) {
      this.imgLength = data.imgLength
    },
    // 保存
    saveForm(type) {
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          this.$set(this.formData, 'shopAttachmentDTOList', [])
          let isValid = true
          this.fileTypeList.map(el => {
            this.formData.shopAttachmentDTOList.push(...el.fileList)
          })
          if (this.fileLength === 0) {
            this.$message.warning('请上传选址评估表')
            isValid = false
          }
          if (this.imgLength < 5) {
            this.$message.warning('卖场环境照片至少上传5张')
            isValid = false
          }
          if (!isValid) return
          this.saveLoading = true
          this.dataLoading = true
          if (!this.id) {
            this.formData.applicantCode = this.$store.getters.user.data.account
            this.formData.applicantPhone = this.$store.getters.user.data.phone
            this.formData.applicantName = this.$store.getters.user.data.userName
          }
          this.formData.reportPicZone = this.formData.reportPicZone.toString()
          saveAddress(this.formData).then(res => {
            if (res.success === 1) {
              const resId = res.msg || this.formData.id
              if (type === '1') {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                })
                this.saveLoading = false
                this.dataLoading = false
                this.goBack()
              } else if (type === '2') {
                // 调用接口执行提交
                submitSelect([resId]).then(res => {
                  if (res.success === 1) {
                    this.$message({
                      message: res.msg || '提交成功',
                      type: 'success'
                    })
                  }
                })
                this.saveLoading = false
                this.dataLoading = false
                this.goBack()
              }
            }
          }).catch(() => {
            this.formData.reportPicZone = this.formData.reportPicZone && this.formData.reportPicZone.split(',')
            this.saveLoading = false
            this.dataLoading = false
          })
        }
      })
    }

  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
  .content{
    padding-bottom: 50px;
    .info-text{
      color: #F56C6C;
      position: absolute;
      width: 700px;
      bottom: -16px;
      left: 109%;
    }
  }
.footer-btn{
      position: fixed;
      left: 0;
      right: 2px;
      bottom: 0;
      padding: 10px;
      margin-top: 20px;
      border-top: 1px solid #eee;
      background-color: #fff;
      z-index: 9;
      box-shadow:0 0 4px #eee;
      text-align: center;
      .el-button+.el-button{
        margin-left: 20px;
      }
    }
</style>
